<template>
    <div class="uploadContainer">
        <input 
            ref="avatarInput"
            type="file" 
            accept="image/jpeg,image/png,image/webp"
            class="inputDisplay"
            @change="afterImageInput"   
        >
        
        <img :src="previewImage" v-if="previewImage" class="imagePreview" style="max-width: 80%;">

        <div v-if="previewImage">
            <input type="range" min="10" max="200" v-model="imgScale">
            <span>{{ imgScale }}</span>
        </div>
    </div>
    
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const avatarInput=ref()
const previewImage=ref()
const imgScale=ref(100)



const afterImageInput =function(){

    const reader =new FileReader();
    reader.onload = function(e){
        previewImage.value=e.target?.result;
        console.log(previewImage)
    }
    reader.readAsDataURL(avatarInput.value.files[0])
}





</script>

<style scoped>
    .uploadContainer{
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }

</style>